NODE ו DOM זה שתי שיטות מקבילות לשינוי HTML?

1 תשובות

avatar ענה intval ב 05 לאפריל 2015 #

הקשר בין dom ל node הוא כמו הקשר בין עלה לעץ, בין מחלקה לתוכנה או בין שורה לספר.
ואף אחד מהם הוא לא שיטה לשינוי html.
אז מה זה?


שפת html היא בסך הכול טקסט, כפי שגם ההגדרה אומרת.
כשהדפדפן מקבל את הקטסט הזה וצריך לצייר משהו על המסך הוא בונה מה-html הזה עץ של אלמנטים:
ככה שבשורש של העץ נמצא אלמנט <html>, ממנו יוצאים שני ענפים: <head> ו <body>
מתוך ה <body> יוצאים ענפים נוספים: <div>, <header>, <p> וכו'
שבתוך כל אחד מהם ישנם תת ענפים נוספים, כמו <b>, <i>, <p> והלעה:



לעץ הזה יש שם: DOM
Document Object Model
או בעברית פשוטה:
מבנה מסמך מאובייקטים (מבנה מסמך מגופים שונים)
כאשר כל אלמנט כזה (body, strong, וכו) הם אובייקטים (גופים\עצמים) שיש בעץ.

לאובייקטים האלה קוראים node (בתרגום מאנגלית: בלוטה, קשר, צומת)
<head> בעץ הזה הוא node. אבל גם strong שנמצא בקצה של העץ הוא node, שפשוט אין לו ילדים אחרים.

לכל node יש מאפיינים ויש פעולות משלו.
למשל יש לכל node מאפיין id שאפשר להציב או לקרוא. בתמונה למעלה רק אצל שני ה-div-ים יש ערך שאיננו ריק
ויש הרבה מאפיינים אחרים, למשל style, href, target, onclick וכו' שאפשר לתת לכל node

אפשר לשנות מאפיינים של node באמצעות javascript, מה שיגרום לדפדפן לצייר את הnode על המסך מחדש עם המאפיין החדש
אפשר גם ליצור node בצורה ידנית ולהוסיף לתוך העץ, מה שיגרום לדפדפן להוסיף אותו למסך

var newDiv = document.createElement('div');
newDiv.setAttribute('style', 'color:green;');
newDiv.innerHTML = "<b>hello<b/>";
document.body.appendChild(newDiv);


לראות את כל המטודות שיש לnode אפשר כאן
ואם לסכם: node הוא מרכיב של dom
ו-dom זה ייצוג מונחה עצמים של טקסט html